<template>
  <div
  class="mask"
  v-if="showCart && calculations.total > 0"
  @click="handleCartShowChange"
  />
  <div class="cart">
    <div class="product" v-if="showCart && calculations.total > 0">
      <!-- 购物车信息弹出层 -->
      <div class="product__header">
        <div class="product__header__all" @click="() => setCarItemsChecked(shopId, calculations.allChecked)">
          <span
            class="product__header__icon iconfont"
            v-html="calculations.allChecked ? '&#xe63b;' : '&#xe667;' "
          ></span>
          全选
        </div>
        <div class="product__header__clear">
          <span
            class="product__header__clear__btn"
            @click="() => clearCartProduct(shopId)">清空购物车</span>
        </div>
      </div>
      <div
        class="product__item"
        v-for="(item) in productList"
        :key="item._id"
      >
        <div
          class="product__item__checked iconfont"
          v-html="item.check ? '&#xe63b;' : '&#xe667;' "
          @click="() => changeCartItemChecked(shopId, item._id)"
        >
        </div>
        <img :src="item.imgUrl" class="product__item__img" />
        <div class="product__item__detail">
            <h4 class="product__item__title">{{item.name}}</h4>
            <p class="product__item__price">
              <span class="product__item__yen">&yen;</span>{{item.price}}
              <span class="product__item__origin">&yen;{{item.oldPrice}}</span>
            </p>
        </div>
        <div class="product__number">
          <span
            class="product__number__minus iconfont"
            @click="() => { changeCartItemInfo(shopId, item._id, item, -1) }"
          >&#xe701;</span>
          {{ item.count || 0}}
          <span
            class="product__number__plus iconfont"
            @click="() => { changeCartItemInfo(shopId, item._id, item, 1) }"
          >&#xe7ba;</span>
        </div>
      </div>
    </div>
    <!-- 底部结算栏 -->
    <div class="check">
      <div class="check__icon">
        <img
          src="http://www.dell-lee.com/imgs/vue3/basket.png"
          class="check__icon__img"
          @click="handleCartShowChange"
        />
        <div class="check__icon__tag">{{calculations.total}}</div>
      </div>
      <div class="check__info">
        总计: <span class="check__info__price">&yen; {{calculations.price}}</span>
      </div>
      <div class="check__btn" v-show="calculations.total > 0">
        <router-link :to="{path: `/orderConfirmation/${shopId}`}">去结算</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { useCommonCartEffect } from '../../effects/cartEffects'

const showCart = ref(false)
// 展示隐藏购物车逻辑
const toggleCartEffect = () => {
  const handleCartShowChange = () => {
    showCart.value = !showCart.value
  }
  return { handleCartShowChange }
}
// if (result.total === 0) { showCart.value = false }

// 获取购物车信息逻辑
const useCartEffect = (shopId) => {
  const store = useStore()
  const { changeCartItemInfo, productList, calculations } = useCommonCartEffect(shopId) // 购物车商品数量增加减

  if (calculations.total === 0) { showCart.value = false }

  // 购物车列表单项数据选中和反选中
  const changeCartItemChecked = (shopId, productId) => {
    // 同步提交到全局存储vuex mutations里
    store.commit('changeCartItemChecked', { shopId, productId })
  }

  // 全选 点击头部的全选->列表是否全为选中状态
  const setCarItemsChecked = (shopId) => {
    const isAllChecked = !calculations.value.allChecked
    store.commit('setCarItemsChecked', { shopId, isAllChecked })
  }

  // 清空购物车
  const clearCartProduct = (shopId) => {
    // 同步提交到全局存储vuex mutations里
    store.commit('clearCartProduct', { shopId })
  }

  return { calculations, productList, changeCartItemInfo, changeCartItemChecked, setCarItemsChecked, clearCartProduct }
}

export default {
  name: 'Cart',
  setup () {
    const route = useRoute()
    const shopId = route.params.id
    const { calculations, productList, changeCartItemInfo, changeCartItemChecked, setCarItemsChecked, clearCartProduct } = useCartEffect(shopId)
    const { handleCartShowChange } = toggleCartEffect()
    return { shopId, calculations, productList, changeCartItemInfo, changeCartItemChecked, setCarItemsChecked, clearCartProduct, showCart, handleCartShowChange }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';
@import '../../style/mixins.scss';
.mask {
  position: fixed;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.50);
    z-index: 1;
}
.cart {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: $bgColor;
}

.product {
    overflow-y: scroll;
    flex: 1;
    background: $bgColor;
    &__header {
      display: flex;
      line-height: .52rem;
      border-bottom: .01rem solid $content-bgColor;
      font-size: .14rem;
      color: $content-fontcolor;
      &__all {
        width: .64rem;
        margin-left: .16rem
      }
      &__icon {
        display: inline-block;
        margin-right: .03rem;
        vertical-align: top; // 把元素的顶端与行中最高元素的顶端对齐
        color: #0091FF;
        font-size: .23rem;
      }
      &__clear {
        flex: 1;
        margin-right: .16rem;
        text-align: right;
        &__btn {
          display: inline-block;
        }
      }
    }
    &__item {
        display: flex;
        position: relative;
        padding: .12rem 0 ;
        margin: 0 .16rem;
        border-bottom: .01rem solid $content-bgColor;
        &__checked {
          line-height: .5rem;
          margin-right: .2rem;
          color: #0091FF;
          font-size: .23rem;
        }
        &__detail {
            overflow: hidden;
        }
        &__img {
            height: .46rem;
            width: .46rem;
            margin-right: .16rem;
        }
        &__title {
            margin: 0;
            line-height: .2rem;
            font-size: .14rem;
            color: $content-fontcolor;
            @include ellipsis;
        }
        &__price {
            margin: .06rem 0 0 0;
            line-height: .2rem;
            font-size: .14rem;
            color: $hightlight-fontColor;
        }
        &__yen {
            font-size: .12rem;
        }
        &__origin{
            margin-left: .06rem;
            line-height: .2rem;
            font-size: .12rem;
            color: $light-fontColor;
            text-decoration: line-through;
        }
        .product__number {
            position: absolute;
            right: .02rem;
            bottom: .26rem;
            &__minus, &__plus {
                position: relative;
                top: .023rem;
                font-size: .2rem;
            }
            &__minus {
                color: $medium-fontColor;
                margin-right: .07rem;
            }
            &__plus {
                color: $btn-bgColor;
                margin-left: .07rem;
            }
        }
    }
}

.check {
    display: flex;
    // box-sizing: border-box; // 总宽度和总高度包含内边距
    height: .49rem;
    border-top: .01rem solid $content-bgColor;
    line-height: .49rem;
    &__icon {
        position: relative;
        width:.84rem;
        &__img {
            display: block;
            margin: .12rem auto;
            width: .28rem;
            height: .26rem;
        }
        &__tag {
            position: absolute;
            left: .46rem;
            top: .04rem;
            padding: 0 .04rem;
            min-width: .2rem;
            height: .2rem;
            line-height: .2rem;
            background-color: $hightlight-fontColor;
            border-radius: .1rem;
            font-size: .12rem;
            text-align: center;
            color: $bgColor;
            transform: scale(.5);
            transform-origin: left center; // 以左侧中心为缩放点
        }
    }
    &__info {
        flex: 1;
        color: $content-fontcolor;
        font-size: .12rem;
        &__price {
            line-height: .49rem;
            color: $hightlight-fontColor;
            font-size: .18rem;
        }
    }
    &__btn {
        width: .98rem;
        background: #4FB0F9;
        text-align: center;
        font-size: .14rem;
        a {
          color: $bgColor;
          text-decoration: none;
        }
    }
}
</style>
